import unicore from '@/core/core.service.ts'
export const inputFb={
    inserted:function(el) {
		var input = el.querySelector('input')||el.querySelector('textarea')
        // if(el.tagName.toUpperCase()!== "INPUT"){
        //     throw new Error("input-fb指令仅用于input 标签")
        // }
		// console.log(input)
		if(input){ // &&unicore.env.isIosh5() ？？？
			input.addEventListener("blur",()=>{
			    setTimeout(() => {
			        if(document.activeElement.tagName.toUpperCase() !=="INPUT"&&document.activeElement.tagName.toUpperCase() !=="TEXTAREA"){
						document.body.scrollTop = 0;
					}
			    }, 300);
			})
		}
    }
}
export const pushUp={
    inserted:function(el) {
		var input = el.querySelector('input') || el.querySelector('textarea')
		var unibody = document.documentElement
		var maxTop = 250
		if(input){
			input.addEventListener("focus",(e)=>{
				setTimeout(() => {
					// e.target.scrollIntoView(true)  ios输入框被标题栏挡住
					e.target.scrollIntoViewIfNeeded()
				}, 100);
				setTimeout(()=>{
					var clientHeight = document.documentElement.clientHeight || window.innerHeight;
					let top =input.getBoundingClientRect().top
					// console.log(input.getBoundingClientRect().bottom)
					// alert(clientHeight-top)
					if(30>clientHeight-top){
						if(!unibody.style['padding-bottom'] || unibody.style['padding-bottom'] == '0px'){
							unibody.style['padding-bottom'] = maxTop+'px';
							unibody.scrollTop+=maxTop;
						}
					}
				},500)
			})
			input.addEventListener("blur",()=>{
				setTimeout(()=>{
					if(document.activeElement.tagName.toUpperCase() !=="INPUT"&&document.activeElement.tagName.toUpperCase() !=="TEXTAREA"){
						unibody.style['padding-bottom'] = 0+'px';
						unibody.scrollTop-=maxTop;
					}
				},300)
			})
		}
    }
}
// 只允许输入汉字和·
export const inputName={
    inserted:function(el,binding) {
		var input = el.querySelector('input')||el.querySelector('textarea')
		if(input){
			input.addEventListener("blur",()=>{
				if(/[^\u4E00-\u9FA5|·|\u2022]/g.test(input.value)){
					setTimeout(() => {
						// input.value=input.value.replace(/[^\u4E00-\u9FA5\•\·]/g,'');
						input.value=input.value.replace(/[^\u4E00-\u9FA5|·|\u2022]/g,'');
						input.value=input.value.replace(/\//g,'');
						input.value=input.value.replace(/[\u2022]/g,'·');
						if(binding.value){
							binding.value[binding.arg]=input.value;
						}
					}, 0);
				}else if(/[^\u2022]/g.test(input.value)){
					input.value=input.value.replace(/[\u2022]/g,'·');
					if(binding.value){
						binding.value[binding.arg]=input.value;
					}
				}
			})

		}
    }
}

// 只允许输入数字
export const inputNumber={
    inserted:function(el,binding) {
		var input = el.querySelector('input')||el.querySelector('textarea')
		if(input){
			input.addEventListener("blur",()=>{
				if(/[^0-9]/.test(input.value)){
					setTimeout(() => {
						input.value=input.value.replace(/[^0-9]/,'')
						if(binding.value){
							binding.value[binding.arg]=input.value;
						}
					}, 0);
				}
			    
			})

		}
    }
}
// 只允许输入数字且第一个数字不为0
export const inputNum0={
    inserted:function(el,binding) {
		
		var input = el.querySelector('input')||el.querySelector('textarea')
		if(input){
			input.addEventListener("blur",(e)=>{	
				if(/[^0-9]/.test(input.value)){
					setTimeout(() => {
						input.value=input.value.replace(/[^0-9]/,'')
						if(binding.value){
							binding.value[binding.arg]=input.value;
						}
					}, 0);
				}else if(/^0+/.test(input.value)){
					setTimeout(() => {
						input.value=input.value.replace(/^0+/g,'')
						if(binding.value){
							binding.value[binding.arg]=input.value
						}
						
					}, 0);
				}
			    
			})

			
		}
    }
}
// 只允许数字和xX
export const inputIdcard={
    inserted:function(el,binding) {
		var input = el.querySelector('input')||el.querySelector('textarea')
		if(input){
			input.addEventListener("blur",()=>{
				setTimeout(() => {
					input.value=input.value.replace(/[^0-9X]/g,'')
					if(binding.value){
						binding.value[binding.arg]=input.value
					}
				}, 0)
			})
			
		}
    }
}
// 不允许输入#和空格
export const noSpace={
    inserted:function(el,binding) {
		var input = el.querySelector('input')||el.querySelector('textarea')
		if(input){
			input.addEventListener("blur",()=>{
				setTimeout(() => {
					input.value=input.value.replace(/[\#\s\r\n]/g,'')
					if(binding.value){
						binding.value[binding.arg]=input.value
					}
				}, 0);
			})

		}
    }
}
// 不允许输入中文
export const noChinese={
    inserted:function(el,binding) {
		var input = el.querySelector('input')||el.querySelector('textarea')
		if(input){
			input.addEventListener("blur",()=>{
				setTimeout(() => {
					input.value=input.value.replace(/[\u4E00-\u9FA5\#\s]/g,'');
					if(binding.value){
						binding.value[binding.arg]=input.value
					}
				}, 0)
			})

		}
    }
}

export const imgRev={
	inserted:function(el){
		console.log(el)
		let imageRate;
		let rotateReg = 0;
		let moveX = 0;
		let moveY = 0;
		let startX = 0;
		let startY = 0;
		let targetX = 0;
		let targetY = 0;
		let scaler = 1;
		let transform = "translate(0px,0px) rotate(0deg) scale(1,1)";
		let moveFlag = false;
		let img = el.querySelector('img');
		console.log(img)
		const regtrans = /\([0-9|\-|\.]*px,.[0-9|\-|\.]*px\)/;
		const scareg = /\([0-9|\-|\.]*,.[0-9|\-|\.]*\)/;
		const reg = /\([0-9|\-]*deg\)/
		const container = el.parentNode;
		var tools = document.createElement('div');
		tools.style="display: flex;justify-content: space-around;"
		var scaleMin = document.createElement('img');
		scaleMin.src = "./static/img/shrink.png"
		scaleMin.addEventListener('click',()=>{
			scale();
		})
		var scaleMax = document.createElement('img');
		scaleMax.src = "./static/img/marginfy.png"
		scaleMax.addEventListener('click',()=>{
			scale('larger');
		})
		var rotateLeft = document.createElement('img');
		rotateLeft.src = "./static/img/against.png"
		rotateLeft.addEventListener('click',()=>{
			rotate('left');
		})
		var rotateRight = document.createElement('img');
		rotateRight.src = "./static/img/correct.png"
		rotateRight.addEventListener('click',()=>{
			rotate('right');
		})
		tools.appendChild(scaleMin)
		tools.appendChild(scaleMax)
		tools.appendChild(rotateLeft)
		tools.appendChild(rotateRight)
		tools.style.position = 'fixed';
		tools.style.bottom="130px";
		tools.style.width="100%"
		tools.style.left=0;
		tools.style.color = '#fff'
		container.append(tools)
		img.addEventListener('load',function(e){
			imageRate = e.currentTarget.naturalWidth/e.currentTarget.naturalHeight;
			reset();
		})
		container.addEventListener('touchstart',function(e){
			startX = e.targetTouches[0].clientX;
			startY = e.targetTouches[0].clientY;
			moveFlag = true;
		})
		var previous = null;
		container.addEventListener('touchmove',function(e){
			// console.log(e)
			if(moveFlag){
				var now = +new Date();
				if(!previous){
					previous = now;
				}
				if(now-previous>20){
					evoke(e);
					previous = now;
				}
				
			}
		})
		function evoke(e){
			const ox = e.targetTouches[0].clientX - startX;
			const oy = e.targetTouches[0].clientY - startY;
			targetX = ox + moveX;
			targetY = oy + moveY;
			// console.log(targetX,targetY)
			transform = transform.replace(regtrans,`(${targetX}px,${targetY}px)`)
			// console.log(transform)
			el.style.transform = transform;
		}
		container.addEventListener('touchend',function(e){
			moveFlag =false;
			moveX = targetX;
			moveY = targetY;
		})
		function reset(){
			container.style.padding='0';
			container.style.textAlign = 'center'
			container.style.overflow = 'hidden'
			el.style.overflow = 'hidden'
			container.style.position = 'relative'
			el.style.marginTop = 0;
			el.style.marginLeft = 0;
			// console.log(container.style.position)
			var mt;
			if(container.clientWidth/container.clientHeight>imageRate){
				el.style.height = container.clientHeight+'px';
				el.style.width = container.clientHeight * imageRate+'px';
				mt = (container.clientWidth - container.clientHeight * imageRate)/2;
				el.style.marginLeft = mt + 'px'
			} else {
				el.style.width = container.clientWidth+'px';
				el.style.height = container.clientWidth/imageRate+'px';
				mt = (container.clientHeight - container.clientWidth/imageRate)/2;
				el.style.marginTop = mt + 'px'
			}
			rotateReg = 0;
			moveX = 0;
			moveY = 0;
			startX = 0;
			startY = 0;
			targetX = 0;
			targetY = 0;
			scaler = 1;
			transform = "translate(0px,0px) rotate(0deg) scale(1,1)"
			el.style.transform = transform;
		}
		
		function rotate(direct){
			if(direct == 'left'){
				rotateReg-=90
			}else {
				rotateReg+=90
			}
			transform = transform.replace(reg,`(${rotateReg%360}deg)`);
			el.style.transform = transform;
		}
		
		function scale(larger){
			
			if(larger == 'larger'){
				scaler+=0.2;
			} else if(scaler>0.4){
				scaler-=0.2
			}
			transform = transform.replace(scareg,`(${scaler},${scaler})`)
			el.style.transform = transform
		}
		// el.
		
	}
}
